14. Absolute Flow

intro

Absolute Flow

The biggest difference between position: absolute and the relative flow is timing.

Remember, relative elements are laid out in the normal flow first. After all of the elements have been laid out, then the shift from its normal position occurs.

In the case of position: absolute, the element is positioned relative to its parent before the rest of the normal flow occurs. Its siblings in the normal flow ignore it and are laid out as if it were not there.

Take a second to examine the next example. Play with the live version! Notice that the blue and yellow colors should be alternating.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Absolute Example</title>
  <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
  <style>
    * {
      box-sizing: border-box;
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: bold;
    }
    div {
      display: inline-block;
      border: 2px solid #2e3d49;
      width: 200px;
      height: 100px;
    }
    div:nth-child(even) {
      background-color: #ecc81a;
    }
    div:nth-child(odd) {
      background-color: #02b3e4;
    }
    .absolute {
      position: absolute;
      top: 50px;
      left: 50px;
    }
  </style>
</head>
<body>
  <div></div>
  <div></div>
  <div class="absolute">Absolute
    <div class="absolute">Absolute child of absolute</div>
  </div>
  <div></div>
</body>
</html>

position: absolute

An absolute element with an absolute element inside it.

An absolute element with an absolute element inside it.

outro

Both position: absolute elements are relative to their parents. Use developer tools on the live site to uncheck top and left. You'll notice that without specified coordinates, the element appears where it would have been in the normal flow, however its siblings still ignore it. The absolute element appears on top.

When Would You Actually Use position: absolute?

Frankly, position: absolute is best thought of as a last resort. If all the other flows fail, then maybe absolute is your best option. Off the top of my head, I can't actually think of an instance where I wanted to use position: absolute. There are, in fact, other CSS techniques for achieving the same kind of shift, of which my favorite is transform: translate. (Transform is a more advanced CSS property and it's incredibly powerful. I recommend checking it out).

It's good to know what position: absolute does, but it's rarely your best positioning option.

Next Concept